<template>
  <div>
    <el-table
      :data="
        tableData.listDate.slice(
          (currentPage4 - 1) * pageSize4,
          currentPage4 * pageSize4
        )
      "
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" align="center" />
      <el-table-column prop="name" label="名字" align="center" />
      <el-table-column prop="num" label="门牌号" align="center" />
      <el-table-column prop="hometype" label="户型" align="center" />
      <el-table-column prop="type" label="房源类型" align="center" />
      <el-table-column prop="title" label="楼盘名称" align="center" />
      <!-- 查询输入框 -->
      <el-table-column>
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="请输入查询内容"
            @keyup.enter="searchLink"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.listDate.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import link from "@/api/Link";
import apiUrl from "@/api/url";
const currentPage4 = ref(1);
const pageSize4 = ref(15);

// 改变条数
const handleSizeChange = (val: number) => {
  pageSize4.value = val;
};
// 改变页数
const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
};

let tableData = reactive({
  listDate: [],
});
let search = ref(""); // 查询框中输入的内容

onMounted(() => {
  link(apiUrl.userlist).then((ok: any) => {
    // console.log(ok.data);
    tableData.listDate = ok.data;
  });
});

// 信息列表查询
let searchLink = () => {
  link(apiUrl.userlist, "GET", {}, { name: search.value }).then((ok: any) => {
    // console.log(ok.data);
    tableData.listDate = ok.data;
  });
};
</script>

<style></style>
